<template>
	<view>
		<!-- 导航栏组件 -->
		<freenavbar zwStatus :title="title" :msgNum="msgNum" :fixedStatus="fixedStatus" @openExtend="openExtend"/>
		
		<!-- 置顶列表 -->
		<block v-for="(item,index) in msgList" :key="index" >
			<freemedislist   v-if="item.istop" :item="item" :index="index" @long="long" :num="num" :propIndex="propIndex"/>
		</block>
		
		<!-- 非置顶列表 -->
		<block v-for="(item,index) in msgList" :key="index">
			<freemedislist v-if="!item.istop" :item="item" :index="index" @long="long" :num="num" :propIndex="propIndex"/>
		</block>
		
		<!-- 弹出层 -->
		<freePopup ref="extend" :bodyWidth="240" :bodyHeight="getMenusHeight">
			<view class="flex flex-column shadow-lg" style="width: 240rpx;" :style="getMenusStyle">
				<view class="flex-1 flex align-center" hover-class="bg-light" v-for="(item,index) in menus" :key="index" @click="clickEvent(item.event)">
					<text class="font-md pl-3">{{item.name}}</text>
				</view>
			</view>
		</freePopup>
	</view>
</template>

<script>
	import freenavbar from'@/components/free-ui/free-nav-bar';//顶部导航组件
	import freemedislist from'@/components/free-ui/free-media-list';//消息列表组件
	import freePopup from'@/components/free-ui/free-popup';//弹出层组件
	export default {
		components:{freenavbar,freemedislist,freePopup},
		data() {
			return {
				title:'微信',//组件导航栏的标题内容
				msgNum:10,//消息数量
				fixedStatus:true,//判断导航栏是否固定
				num:1,//角标的默认数值
				propIndex:-1,
				msgList:[  //信息列表模拟数据
					{
						id:0,
						logo:'/static/images/index/logo2.jpg',
						title:'公众平台安全助手',
						info:'公众号定时群发设置完成',
						time:1628838816,//通常情况下使用时间戳比较好处理 推荐使用时间戳
						noreadnum:1,
						istop:false
					},
					{
						id:1,
						logo:'/static/images/index/logo1.jpg',
						title:'中国建设银行',
						info:'交易提醒',
						time:1628738015,
						noreadnum:0,
						istop:false
					},
					{
						id:2,
						logo:'/static/images/index/logo3.jpg',
						title:'京东JD.COM',
						info:'物流跟踪信息提醒',
						time:1597202015,
						noreadnum:3,
						istop:false
					},
					{
						id:3,
						logo:'/static/images/index/logo4.jpg',
						title:'微信支付',
						info:'微信支付有优惠兑换成功',
						time:1628838816,
						noreadnum:6,
						istop:true
					},
					{
						id:4,
						logo:'/static/images/index/logo5.jpg',
						title:'A北辰在线',
						info:'[图片]',
						time:1628838816,
						noreadnum:9,
						istop:false
					},
				],
				menus:[
					{
						name:"设为置顶",
						event:"setTop",
					},
					{
						name:"删除该聊天",
						event:"delChat",
					},
				]
			}
		},
		onShow() {
		},
		computed:{
			//动态获取菜单的高度
			getMenusHeight(){
				let H  = 100;
				return this.menus.length*H;
			},
			// 获取菜单的样式
			getMenusStyle(){
				return `height:${this.getMenusHeight}rpx`
			}
		},
		methods: {
			long(x,y,index){
				// 初始化 索引
				this.propIndex = index;
				this.$refs.extend.show(x,y);
				// 拿到当前对象
				let item = this.msgList[this.propIndex];
				// 判断之前是否是置顶状态
				this.menus[0].name = item.istop?'取消置顶':'设为置顶';
			},
			// 分发菜单事件
			clickEvent(event){
				switch(event){
					case "setTop":
					this.setTop(this.propIndex);
					break;
					case "delChat": //删除当前会话
					this.delChat();
					break;
				};
				this.$refs.extend.hiden();
			},
			//删除当前会话
			delChat(){
				this.msgList.splice(this.propIndex,1);
			},
			//置顶/取消置顶会话操作
			setTop(index){
				let item = this.msgList[this.propIndex];
				item.istop = !item.istop;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/free.css';
	@import '@/common/common.css';
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
	::-webkit-scrollbar {
	  display: none;
	}
</style>
